<template>
    <div>
        <div class="center-all clearfix">
            <div class="center-all-img clearfix">
                <img class="fl" src="../assets/image/center/jtb.png" alt="" @click="returnParent()">
                <img class="fr" src="../assets/image/center/icon_set.png" alt="" @click="setUp()">
            </div>
            <div class="xx-center clearfix" @click="gerenCenter()">
                <img class="tx fl" :src="$imgPath(message.headImg)" alt="">
                <p class="xx-center-p fl">
                    <span class="font-34 font-weight">{{message.nickname}}<!-- <img v-if="message.type == 1" class="icon_vip" src="../assets/image/center/icon_vip.png" alt=""> --><!-- <em class="level">LV{{message.level}}</em> --></span>
                    <span class="font-24"><!-- <em class="liang">靓</em> -->UID:{{message.code}} <van-icon class="fr" name="arrow" color="fff" size=".6rem" /></span>
                    <span class="font-24">{{message.signature}}</span>
                </p>
            </div>
            <p class="p1 pm">
                <span class="fl span1" @click="gz(0)"><em class="mar">{{message.followNum}}</em>关注</span>
                <span class="fl" @click="gz(1)"><em class="mar">{{message.fansNum}}</em>粉丝</span>
                <!-- <router-link tag="span" class="text-align-l fl" :to="{ name: 'giveLike',params:{giveLikeId:message.id}}">点赞</router-link> -->
            </p>
            <div class="jihe background-fff clearfix">
                <span v-if="!isTopUp" @click="czMoney()">
                    <img src="../assets/image/center/icon_recharge.png" alt="" srcset="">
                    <em>充值</em>
                </span>
                <span v-else style="width:12.5%;display:block; float:left; min-height:1rem;">
                </span>
                <span @click="topUpLink()">
                    <img src="../assets/image/center/icon_diamond.png" alt="" srcset="">
                    <em>钻石</em>
                </span>
                <router-link tag="span" :to="{ name: 'coupons'}">
                    <img src="../assets/image/center/icon_coupon.png" alt="" srcset="">
                    <em>优惠券</em>
                </router-link>
                <router-link tag="span" :to="{ name: 'income',params:{incomeId:'1111'}}">
                    <img src="../assets/image/center/icon_income.png" alt="" srcset="">
                    <em>收入</em>
                </router-link>
            </div>
            <ul class="center-all-ul clearfix">
                <router-link class="clearfix" tag="li" :to="{name:'order'}">
                    <img class="fl margin-r" src="../assets/image/center/icon_order.png" alt="">
                    <em class="fl">我的订单</em>
                    <img class="fr arrow-img" src="../assets/image/center/icon_arrow_g.png" alt="">                        
                </router-link>
                <!-- <router-link class="clearfix" tag="li" :to="{name:'service'}">
                    <img class="fl margin-r" src="../assets/image/center/icon_service.png" alt="">
                    <em class="fl">我的服务</em>
                    <img class="fr arrow-img" src="../assets/image/center/icon_arrow_g.png" alt=""> 
                </router-link> -->
                <!-- <router-link tag="li" :to="{name:'gift'}" class="clearfix">
                    <img class="fl margin-r" src="../assets/image/center/icon_gift.png" alt="">
                    <em class="fl">我的礼物</em>
                    <img class="fr arrow-img" src="../assets/image/center/icon_arrow_g.png" alt=""> 
                </router-link> -->
                <router-link tag="li" :to="{name:'help'}" class="clearfix">
                    <img class="fl margin-r" src="../assets/image/center/icon_help.png" alt="">
                    <em class="fl">投诉与帮助</em>
                    <img class="fr arrow-img" src="../assets/image/center/icon_arrow_g.png" alt=""> 
                </router-link>
            </ul>
        </div>
        <van-tabbar>
            <span class="off-dynamic text-align-c" v-if="message.onlineStatus == 0" @click="updateData(1)">一键下线</span>
            <span class="fabu-dynamic text-align-c" v-else-if="message.onlineStatus == 1" @click="updateData(0)">一键上线</span>
        </van-tabbar>
    </div>
</template>
<script>
import apiHttp from '../api/index'
export default {
    data(){
        return{
            message:{},
            isTopUp:this.$store.state.iosTrue     
        }
    },
    created(){
        this.homePage()
    },
    mounted(){
    },
    methods:{
        // 跳转->是app还是浏览器   终端的判断
        czMoney(){
            let self = this
            if(this.$store.state.iosTrue == true){
                self.$router.push({
                    path:'/iosMoneyTopUp',
                    query:{
                        phone:self.message.phone
                    }
                })
            }else{
                self.$router.push({
                    path:'/moneyTopUp',
                    query:{
                        phone:self.message.phone
                    }
                })
            }
            
        },
        // 跳转->是app还是浏览器   终端的判断
        topUpLink(){
            let self = this
            if(this.$store.state.iosTrue == true){
                self.$router.push({
                    path:'/iosTopUp',
                    query:{
                        phone:self.message.phone
                    }
                })
            }else{
                self.$router.push({
                    path:'/topUp',
                    query:{
                        phone:self.message.phone
                    }
                })
            }
        },
        //跳到设置页面
        setUp(){
            this.$router.push({
                path:'/setting',
                query:{
                    phone:this.message.phone,
                    bindWx:this.message.bindWx
                }
            })
        },
        // 个人资料
        homePage(){
            apiHttp.apiCenter.detail('',resp => { 
                if(resp.headImg==null || resp.headImg==''){
                    resp.headImg = '/user/head/defaultHeadImage.png';
                }            
                this.message = resp;
                if (this.message.nickname !=undefined && this.message.nickname.length > 8) {
                    this.message.nickname =  this.message.nickname.slice(0,8) + '...'
                }
                if (this.message.signature !=undefined && this.message.signature.length > 18) {
                    this.message.signature =  this.message.signature.slice(0,18) + '...'
                }


            })
        },
        // 跳转到个人主页
        gerenCenter(){
            this.$router.push({
                name:'center',
                params:{
                    userId:this.message.id
                }
            })
        },
        // 关注与粉丝跳转
        gz(type){
            this.$router.push({
                name:'focusOn',
                params:{
                    focusId:this.message.id,
                    typeId:type
                }
            })
        },
        updateData(type){
            let params = {
                onlineStatus:type
            }
            apiHttp.apiCenter.updateDataOnlineStatus(this.$qs.stringify(params),resp=>{
                this.homePage()
            })
        },
        //返回到首页
        returnParent(){
            this.$router.push({
                name:"index"               
            });
        }
    }
}
</script>

<style scoped>
.margin-r{
    width: 1rem;
    margin-right: .4rem;
}
.arrow-img{
    width: 0.3rem !important;
    height: 0.5rem !important;
    margin-top: 0.2rem;
    margin-right: 0rem;    
}
.font-weight{
    font-weight: 500;
}
.center-all{
    background: url('../assets/image/center/img_bj.png');
    background-position: top center;
    background-repeat: no-repeat;
    background-size: 100% 62%;
    /* background-size: 100% 47.5%; */
    width: 100%;
}
.center-all-img{
    padding: 0 .6rem;
    width: calc(100% - 1.2rem);
}
.center-all-img img{
    margin-top: .4rem;
    width: .8rem;
}
.xx-center{
    margin-top: .8rem;
    height:3rem;
    padding: 0 .6rem;
    width: calc(100% - 1.2rem);
}
.xx-center .tx{
    width: 3rem;
    height: 3rem;
    border-radius: 1.24rem;
}
.xx-center-p{
    color: #ffffff;
    width: calc(100% - 3.6rem);
    padding-left: .6rem;
}
.xx-center-p span{
    display: block;
    height: 1rem;
    line-height: 1rem;
    overflow: hidden;
}
/* .icon_vip{
    width: 1rem;
    margin-left: 0.5rem;
} */
/* .level{
    padding: 0.07rem 0.4rem;
    background-color: rgba(247, 211, 8, 0.849);
    margin-left: 0.5rem;
    border-radius: 0.4rem;
    font-size: .3rem;
    line-height: 0.7rem;
    position: relative;
    bottom: 0.12rem;
} */
/* .liang{
    background-color:yellow;
    color: #d84f4d;
    padding: 0.02rem 0.3rem;
    border-radius: 0.4rem;
    margin-right: 0.3rem;
    font-size: .3rem;
} */
.pm{
    margin-top: .4rem;
}
.p1{
    width: 73%;
    height: .8rem;
    color: #fff;
    font-size: .5rem;  
    padding-left: 27%;
}
.p1 span{
    height: .8rem;
    display: block;
}
.span1{
    margin-right: 13%;
}
.mar{
    margin-right: 0.3rem;
    font-size: .8rem;
}
.center-all-ul li{
    padding: .6rem;
    border-bottom: #eeeeee solid .02rem;
    width: calc(100% - 1.2rem);
    font-size: .6rem;
}
.center-all-ul li em{
    line-height: 1rem;
    padding-left: .3rem;
    color: #333333;
}
.van-icon{
    margin-top: .2rem;
}
.jihe{
    padding: .6rem 0;
    width: calc(100% - 1.2rem);
    margin: 1.3rem auto 0;
    border-radius: 4rem;
    box-shadow:0rem 0.4rem 0.4rem #f8f8f8;
}
.jihe span{
    width: 25%;
    float: left;
    text-align: center;
}
.jihe span img{
    width: 0.9rem;
}
.jihe span em{
    display: block;
    text-align: center;
    font-size: .46rem;
    color:#999;
}
.off-dynamic{
    height: 1.76rem;
    background-color: #cccccc;
    line-height: 1.76rem;
    border-radius: 1rem;
    color: #fff;
    font-size: .68rem;
    display: block;
    width: 100%;
}
</style>

